import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './style/index.less';
import Iconfont from 'components/Iconfont';
import router from 'umi/router';

class Nav extends React.Component {
  static defaultProps = {
    columns: []
  }

  handleClick = (path) => {
      router.push(path)
  }
  render() {
    const { columns, className } = this.props;
    return (<div className={`${styles.Nav} clearfix`}>
        {columns.map((ele, index) => {
            const { icon, title, path } = ele;
            // 有图标则展示
            if(icon){
              return (<div key={index} className={`${styles.items} ${styles[className]}`}
                  onClick={this.handleClick.bind(this, path)}>
                  <div className={styles.icon}><Iconfont type={icon} /></div>
                  <span>{title}</span>
              </div>)
            }
        })}
    </div>)
  }
}

Nav.propTypes = {
    columns: PropTypes.array
}

export default Nav;